<template>
    <div class="returnGovernment-examination-box" :key="returnGovernmentExaminationKey">
        <!-- <div class="process-handling-card">
            <a-tabs type="card" v-model:activeKey="activeKey" @change="tabPaneChange" v-if="!currentRow.isTopTabs">
                <a-tab-pane key="退回政务通知函" tab="退回政务通知函"></a-tab-pane>
                <a-tab-pane key="环节流转记录" tab="环节流转记录"></a-tab-pane>
            </a-tabs>
        </div> -->
        <div class="returnGovernment-examination-content" v-if="activeKey == '退回政务通知函'">
            <div style="width: 50%;">
                <div style="margin-bottom: 8px;" >
                    <a-button style="margin-right: 15px;" class="blue-btn" type="primary" @click="refreshFile()">刷新</a-button>
                    <a-button style="margin-right: 15px;" class="blue-btn" type="primary" @click="downloadFiles(iframeData)">下载</a-button>
                </div>
                <iframe :src="iframeSrc" width="100%" :height="windowInnerHeight+'px'"  v-if="iframeSrc" ></iframe>
                <span v-else>当前暂无文件或文件发生错误！</span>
            </div>
            <div style="width: 50%;">
                <div style="margin: 10px 0 0 10px;">
                    <div style="font-size: 16px;font-weight: 600;background: #e6f7ff;padding: 5px;color: #38f;">退回政务服务意见</div>
                    <a-textarea 
                        readOnly
                        v-model:value="currentRow.fcjyj"
                        placeholder="请输入退回政务服务意见"
                        :autosize="{ minRows: 3, maxRows: 3 }"
                    ></a-textarea>
                </div>
                <div v-if="currentRow.fthzwdxnr" style="margin: 10px 0 0 10px;">
                    <div style="font-size: 16px;font-weight: 600;background: #e6f7ff;padding: 5px;color: #38f;">提醒企业短信内容</div>
                    <a-textarea 
                        readOnly
                        v-model:value="currentRow.fthzwdxnr"
                        placeholder="请输入短信内容"
                        :autosize="{ minRows: 3, maxRows: 3 }"
                    ></a-textarea>
                </div>
                <div style="font-size: 16px;font-weight: 600;margin-left: 10px;margin-top: 10px;background: #e6f7ff;padding: 5px;color: #38f;">流转记录</div>
                <div :style="{height: currentRow.fthzwdxnr?'calc(100vh - 411px)':'calc(100vh - 287px)'}" 
                style="height: calc(100vh - 170px);overflow-y: auto;border: 1px solid #38f;margin-left: 10px;">
                    <commpVxeTable
                        ref="headmanVxeTable"
                        :key="internalOpinionsKey"
                        :config="internalOpinionsConfig" 
                        :columns="internalOpinionsColumnsVxe" 
                        :formItem="[]"
                        :isCanWrap="true"
                        :adaptiveHeight="true"
                    >
                    </commpVxeTable>
                </div>
            </div>
        </div>
        <div class="returnGovernment-examination-sxxx" v-if="activeKey == '申请信息'  || activeKey == '环节流转记录'" style="height: 100%;overflow: hidden;">
            <a-spin size="large" :spinning="modalSpinningPrice" tip="正在加载中...">
                <eventSet :key="eventSetKey" ref="eventSetRef" @updatedSuccess="eventupdatedSuccess"/>
            </a-spin>
        </div>
        <a-modal
            :dialog-style="{ top: '20px' }"
            title="查看申请信息"
            :visible="applicationVisible"
            @ok="applicationVisible = false"
            @cancel="applicationVisible = false"
            :footer="null"
            :width="1500"
            class="application-modal-box"
        >
            <a-spin size="large" :spinning="modalSpinningPrice" tip="正在加载中...">
                <eventSet :key="eventSetKey" ref="eventSetRef" @updatedSuccess="eventupdatedSuccess"/>
            </a-spin>
        </a-modal>
    </div>
</template>
<script>
import eventSet from '../taskAcceptance/eventSet.vue'
import { initWjgetZzzQycjFile, webOfficeApiopenFileReadOnly, spcySqsxWjjlgetLocalFileById, } from './service/index'
import assessCheckApi from './service/api'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
export default {
    components:{
        eventSet,
        commpVxeTable,
    },
    props:{

    },
    data(){
        return{
            returnGovernmentExaminationKey:null,
            currentRow:{},
            activeKey:'退回政务通知函',
            applicationVisible:false,
            modalSpinningPrice:false,
            eventSetKey:null,
            iframeSrc:'',
            windowInnerHeight:window.innerHeight - 180,
            iframeData:{},
            internalOpinionsKey:null,
            internalOpinionsConfig:{
                api:assessCheckApi.querySqsxDetailsById,
                rowId: 'id',
                autoHidden:true,
                pageSize:10000,
                listData:'jobHistoryList',
                paramet:{
                }
            },
            internalOpinionsColumnsVxe:[{
                title: '环节名称', //列头显示文字
                field: 'fhjmc',
                width:112,
            },{
                title: '待办人', //列头显示文字
                field: 'fdbr',
            },{
                title: '办理人', //列头显示文字
                field: 'fblr',
            },{
                title: '发送时间', //列头显示文字
                field: 'ffssj',
            },{
                title: '办理时间', //列头显示文字
                field: 'fblsj',
            },{
                title: '使用工日',
                field: 'fsyts',
                width:80,
            },{
                title: '办理状态', //列头显示文字
                field: 'fblzt',
                width:80,
            },{
                title: '办理意见', //列头显示文字
                field: 'fblyj',
            }],
        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{
        getData(row){
            //console.log('我获取了什么信息',row)
            this.currentRow = row
            if(!row.noFirstLoad){
                this.activeKey = row.isActiveKey?'':'退回政务通知函'
                this.returnGovernmentExaminationKey = Date.now()
            }
            this.internalOpinionsConfig = {
                api:assessCheckApi.querySqsxDetailsById,
                rowId: 'id',
                autoHidden:true,
                pageSize:10000,
                listData:'jobHistoryList',
                paramet:{sqsxid:this.currentRow.sqsxid}
            }
            this.internalOpinionsKey = Date.now()
            this.getFilerData()
        },
        getFilerData(){
            initWjgetZzzQycjFile({sqsxid:this.currentRow.sqsxid}).then(res=>{
                if(res.code == 200){
                    if(res.result.length){
                        this.iframeData = res.result[0]
                        if(this.iframeData.fwjlx == '.pdf'){
                            this.iframeSrc = bootConfig[process.env.NODE_ENV].locality_ApI + YchConstant.SPZX_SPCY + '/spcyRsWjmb/openWjjl?id='+this.iframeData.id
                        }else{
                            this.openFileClick(this.iframeData)
                        }
                    }else{
                        this.iframeData = {}
                        this.iframeSrc = ''
                    }
                }else{
                    this.iframeSrc = ''
                }
            })
        },
        refreshFile(){
            this.getFilerData()
        },
        openFileClick(val){//打开文件
            webOfficeApiopenFileReadOnly({id:val.id}).then(res=>{
                if(res.code == 200){
                    this.iframeSrc = res.result.wordUrl
                    this.iframeKey = Date.now()
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        downloadFiles(val){//下载
            var that = this
            var fwjlx = val.fwjlx
            let param = { fywflcode:'001002',id:val.id,sqsxid:this.currentRow.sqsxid}
            spcySqsxWjjlgetLocalFileById(param).then((data) => {
                if (!data) {
                    that.$message.warning('文件下载失败')
                return
                }
                    let url = window.URL.createObjectURL(new Blob([data], { type: blobType.type[blobType.suffix.indexOf(fwjlx)] }))
                    let link = document.createElement('a')
                    link.style.display = 'none'
                    link.href = url
                    link.setAttribute('download', val.fwjccmc )
                    document.body.appendChild(link)
                    link.click()
                    document.body.removeChild(link) //下载完成移除元素
                    window.URL.revokeObjectURL(url) //释放掉blob对象
            })
        },
        tabPaneChange(val){
            if(val == '申请信息'  || val == '环节流转记录'){
                this.modalSpinningPrice = true
                this.$nextTick(()=>{
                    setTimeout(()=>{
                        this.$refs.eventSetRef.getDatas({...this.currentRow,tabPaneActiveKey:val,modelHeight:val == '申请信息'?true:false,borderisFalse:true})
                        
                    },200)
                })
            }
        },
        eventupdatedSuccess(){
            //console.log('我已经返回了')
            setTimeout(()=>{
                this.modalSpinningPrice = false
            },1000)
            // this.modalSpinningPrice = false
        },
    }
}
</script>
<style lang="less">
.returnGovernment-examination-box{
    .returnGovernment-examination-content{
        background-color: #fff;
        border: 1px solid #38f;
        // border-top: none;
        padding: 8px;
        height: calc(100vh - 119px);
        overflow-y: auto;
        display: flex;
    }
    .returnGovernment-examination-sxxx{
        min-height: calc(100vh - 153px);
        .ant-spin-spinning{
            width: 100%;
            height: 300px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-content: center;
        }
    }
}

</style>